	var websocket = null;
    //判断当前浏览器是否支持WebSocket
    
    let ls_UserId = decodeURI(decodeURI(location.search)).replace('?userId=','');
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/sv/websocket?userId=" + ls_UserId);
    }else if('MozWebSocket' in window){
    	webSocket = new MozWebSocket("ws://localhost:8080/sv/websocket?userId=BaGuang");
    } else {
        alert('当前浏览器 Not support websocket');
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
        //websocket.send("li guang is cheaper");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
		var ls_NewCustomer = "<li class=\"contacts-item friends\">" +
			"<a class=\"contacts-link\" >" +
		"<div class=\"avatar avatar-online\">" +
			"<img src=\"./../assets/media/avatar/2.png\" alt=\"\">" +
		"</div>" +
		"<div class=\"contacts-content\">" +
			"<div class=\"contacts-info\">" +
			"	<h6 class=\"chat-name text-truncate\">" + "小爷来啦" + "</h6>" +
			"	<div class=\"chat-time\">Just now</div>" +
			"</div>" +
			"<div class=\"contacts-texts\">" +
			"	<p class=\"text-truncate\">I’m sorry, I didn’t catch that. Could you please repeat?</p>" +
			"</div>" +
				"</div>" +
			"</a>" +
		"</li>";
		$("#chatContactTab").append(ls_NewCustomer);
		
		var ls_NewMessage = "<div class=\"message\">" + 
                             "       <div class=\"message-wrapper\">" + 
                              "          <div class=\"message-content\">" + 
                              "              <span>" + event.data + "</span>" + 
                              "          </div>" + 
                              "      </div>" + 
                              "      <div class=\"message-options\">" + 
                              "          <div class=\"avatar avatar-sm\"><img alt=\"\" src=\"./../assets/media/avatar/6.png\"></div>" + 
                              "          <span class=\"message-date\">9:12am</span>" + 
                              "          <div class=\"dropdown\">" + 
                              "              <a class=\"text-muted\" href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">" + 
                              "                  <!-- Default :: Inline SVG -->" + 
                              "                  <svg class=\"hw-18\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" + 
                              "                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z\"/>" + 
                              "                  </svg>" + 

                              "                  <!-- Alternate :: External File link -->" + 
                              "                  <!-- <img class=\"injectable hw-18\" src=\"./../assets/media/heroicons/outline/dots-horizontal.svg\" alt=\"message options\"> -->" + 
                              "              </a>" + 
        
                              "              <div class=\"dropdown-menu\">" + 
                              "                  <a class=\"dropdown-item d-flex align-items-center\" href=\"#\">" + 
                              "                      <!-- Default :: Inline SVG -->" + 
                              "                      <svg class=\"hw-18 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" + 
                              "                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"/>" + 
                              "                      </svg>" + 
                                                      
                              "                      <!-- Alternate :: External File link -->" + 
                              "                      <!-- <img class=\"injectable hw-18 mr-2\" src=\"./../assets/media/heroicons/outline/duplicate.svg\" alt=\"message options\"> -->" + 
                              "                      <span>Copy</span>" + 
                              "                  </a>" + 
                              "                  <a class=\"dropdown-item d-flex align-items-center\" href=\"#\">" + 
                              "                      <!-- Default :: Inline SVG -->" + 
                              "                      <svg class=\"hw-18 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" + 
                              "                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6\"/>" + 
                              "                      </svg>" + 

                              "                      <!-- Alternate :: External File link -->" + 
                              "                      <!-- <img class=\"injectable hw-18 mr-2\" src=\"./../assets/media/heroicons/outline/reply.svg\" alt=\"message replay\"> -->" + 
                              "                      <span>Replay</span>" + 
                              "                  </a>" + 
                              "                  <a class=\"dropdown-item d-flex align-items-center\" href=\"#\">" + 
                              "                      <!-- Default :: Inline SVG -->" + 
                              "                      <svg class=\"hw-18 rotate-y mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" + 
                              "                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6\"/>" + 
                              "                      </svg>" + 

                              "                      <!-- Alternate :: External File link -->" + 
                              "                      <!-- <img class=\"injectable rotate-y hw-18 mr-2\" src=\"./../assets/media/heroicons/outline/reply.svg\" alt=\"message forward\"> -->" + 
                              "                      <span>Forward</span>" + 
                              "                  </a>" + 
                              "                  <a class=\"dropdown-item d-flex align-items-center\" href=\"#\">" + 
                              "                      <!-- Default :: Inline SVG -->" + 
                              "                      <svg class=\"hw-18 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" + 
                              "                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"/>" + 
                              "                      </svg>" + 
                                                      
                              "                      <!-- Alternate :: External File link -->" + 
                              "                      <!-- <img class=\"injectable hw-18 mr-2\" src=\"./../assets/media/heroicons/outline/star.svg\" alt=\"message favourite\"> -->" + 
                              "                      <span>Favourite</span>" + 
                              "                  </a>" + 
                              "                  <a class=\"dropdown-item d-flex align-items-center text-danger\" href=\"#\">" + 
                              "                      <!-- Default :: Inline SVG -->" + 
                              "                      <svg class=\"hw-18 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" + 
                              "                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"/>" + 
                              "                      </svg>" + 
                                                   
                              "                      <!-- Alternate :: External File link -->" + 
                              "                      <!-- <img class=\"injectable hw-18 mr-2\" src=\"./../assets/media/heroicons/outline/trash.svg\" alt=\"message delete\"> -->" + 
                              "                      <span>Delete</span>" + 
                              "                  </a>" + 
                              "              </div>" + 
                              "          </div>" + 
                              "      </div>" + 
                              "  </div>";
		$("#TextBox_TodayMessage").append(ls_NewMessage);
		$("#messageBody").animate({scrollTop:$("#messageBody")[0].scrollHeight},'1000');
		//setMessageInnerHTML(event.data);
    }
 
    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }
 
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }
 
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        //document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
 
    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }
 
	$("#Button_SendMessage").click(function(){
		send();
		//websocket.send($("#TextBox_ReplyMessage").val());
		var ls_SelfMessage = "<div class=\"message self\">" +
                         "           <div class=\"message-wrapper\">" +
                         "               <div class=\"message-content\"><span>" + $("#TextBox_ReplyMessage").val() + "</span></div>" +
                         "           </div>" +
                         "           <div class=\"message-options\">" +
                         "               <div class=\"avatar avatar-sm\"><img alt=\"\" src=\"./../assets/media/avatar/6.png\"></div>" +

                         "               <span class=\"message-date\">Just now</span>" +

                         "               <div class=\"dropdown\">" +
                         "                   <a class=\"text-muted\" href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">" +
                         "                       <!-- Default :: Inline SVG -->" +
                         "                       <svg class=\"hw-18\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" +
                         "                           <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z\"/>" +
                         "                       </svg>" +

                         "                       <!-- Alternate :: External File link -->" +
                         "                       <!-- <img class=\"injectable hw-18\" src=\"./../assets/media/heroicons/outline/dots-horizontal.svg\" alt=\"message options\"> -->" +
                         "                   </a>" +
        
                         "                   <div class=\"dropdown-menu\">" +
                         "                       <a class=\"dropdown-item d-flex align-items-center\" href=\"#\">" +
                         "                           <!-- Default :: Inline SVG -->" +
                         "                           <svg class=\"hw-18 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" +
                         "                               <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"/>" +
                         "                           </svg>" +
                                                      
                         "                           <!-- Alternate :: External File link -->" +
                         "                           <!-- <img class=\"injectable hw-18 mr-2\" src=\"./../assets/media/heroicons/outline/duplicate.svg\" alt=\"message options\"> -->" +
                         "                           <span>Copy</span>" +
                         "                       </a>" +
                         "                       <a class=\"dropdown-item d-flex align-items-center\" href=\"#\">" +
                         "                           <!-- Default :: Inline SVG -->" +
                         "                           <svg class=\"hw-18 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" +
                         "                               <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z\"/>" +
                         "                           </svg>" +

                         "                           <!-- Alternate :: External File link -->" +
                         "                           <!-- <img class=\"injectable hw-18 mr-2\" src=\"./../assets/media/heroicons/outline/pencil.svg\" alt=\"message edit\"> -->" +
                         "                           <span>Edit</span>" +
                         "                       </a>" +
                         "                       <a class=\"dropdown-item d-flex align-items-center\" href=\"#\">" +
                         "                           <!-- Default :: Inline SVG -->" +
                         "                           <svg class=\"hw-18 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" +
                         "                               <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6\"/>" +
                         "                           </svg>" +

                         "                          <!-- Alternate :: External File link -->" +
                         "                           <!-- <img class=\"injectable hw-18 mr-2\" src=\"./../assets/media/heroicons/outline/reply.svg\" alt=\"message replay\"> -->" +
                         "                           <span>Replay</span>" +
                         "                       </a>" +
                         "                       <a class=\"dropdown-item d-flex align-items-center\" href=\"#\">" +
                         "                           <!-- Default :: Inline SVG -->" +
                         "                           <svg class=\"hw-18 rotate-y mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" +
                         "                               <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6\"/>" +
                         "                           </svg>" +

                         "                           <!-- Alternate :: External File link -->" +
                         "                           <!-- <img class=\"injectable rotate-y hw-18 mr-2\" src=\"./../assets/media/heroicons/outline/reply.svg\" alt=\"message forward\"> -->" +
                         "                           <span>Forward</span>" +
                         "                       </a>" +
                         "                       <a class=\"dropdown-item d-flex align-items-center\" href=\"#\">" +
                         "                           <!-- Default :: Inline SVG -->" +
                         "                           <svg class=\"hw-18 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" +
                         "                               <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"/>" +
                         "                           </svg>" +
                                                      
                         "                           <!-- Alternate :: External File link -->" +
                         "                           <!-- <img class=\"injectable hw-18 mr-2\" src=\"./../assets/media/heroicons/outline/star.svg\" alt=\"message favourite\"> -->" +
                         "                           <span>Favourite</span>" +
                         "                       </a>" +
                         "                       <a class=\"dropdown-item d-flex align-items-center text-danger\" href=\"#\">" +
                         "                           <!-- Default :: Inline SVG -->" +
                         "                           <svg class=\"hw-18 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">" +
                         "                               <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"/>" +
                         "                           </svg>" +
                                                      
                         "                           <!-- Alternate :: External File link -->" +
                         "                           <!-- <img class=\"injectable hw-18 mr-2\" src=\"./../assets/media/heroicons/outline/trash.svg\" alt=\"message delete\"> -->" +
                         "                           <span>Delete</span>" +
                         "                       </a>" +
                         "                   </div>" +
                         "               </div>" +
                         "           </div>" +
                         "       </div>"
		$("#TextBox_TodayMessage").append(ls_SelfMessage);
		$("#TextBox_ReplyMessage").val("");
		$("#messageBody").animate({scrollTop:$("#messageBody")[0].scrollHeight},'1000');
	})
    //发送消息
    function send() {
		/*$("#Button_SendMessage").click(function(){
			websocket.send("趋势。");
		})*/
		let UserId = '';
    	if(ls_UserId == 'xiaoming'){
			UserId = 'xiaoshuai';
			console.log(UserId);
		}else if (ls_UserId == 'xiaoshuai'){
			UserId = 'xiaoming';
			console.log(UserId);
		}else if(ls_UserId == 'feixing'){
			UserId = 'wurenji'
		}
        //var message = document.getElementById('text').value;
        let lJSONObject_Message = new Object();
        lJSONObject_Message.UserId = UserId;
        lJSONObject_Message.Message = $("#TextBox_ReplyMessage").val();
        //JSON.stringify(lJSONObject_Message)
        websocket.send(JSON.stringify(lJSONObject_Message));
   	}